<template>
  <div id="app" :style="{'padding-top': showTitleBar?'45px':'0px'}">
    <x-header style="position: fixed;top:0px;width: 100%;z-index: 9999" v-if="showTitleBar">
      <span>{{currentTitle}}</span>
    </x-header>
    <router-view></router-view>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import { mapGetters } from 'vuex'

  export default {
    name: 'app',
    components: {XHeader},
    data () {
      return {
        showTitleBar: true,
        currentTitle: ''
      }
    },
    created () {
      if (this.isInWeixin()) {
        console.log('微信客户端打开')
        this.showTitleBar = false
        this.$store.commit('setShowTitleBar', false)
        this.$wechat.getNetworkType({
          success: function (res) {
//            var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi
//            console.log(networkType)
          }
        })
      } else {
        this.$store.commit('setShowTitleBar', true)
      }
      this.showTitleBar = this.$store.state.showTitleBar
    },
    computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
      ...mapGetters([
        'getTitle'
      ])
    },
    updated () {
      window.scroll(0, 0)
    },
    watch: {
      getTitle () {
        this.currentTitle = this.$store.state.title
        document.title = this.currentTitle
      }
    },
    methods: {
      isInWeixin: function () {
        var ua = navigator.userAgent.toLowerCase()
        var isWeixin = ua.indexOf('micromessenger') !== -1
        if (isWeixin) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
